<template>
  <button
      class="favorite-btn"
      :class="{ 'favorited': modelValue }"
      style="font-size:12px"
      @click="toggleFavorite"
      :aria-label="modelValue ? 'Remove from collection' : 'Collect products'"
  >
    <svg class="heart-icon" viewBox="0 0 24 24">
      <!-- 线性爱心路径 -->
      <path
          v-if="!favorite"
          d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
      />
      <!-- 实心爱心路径 -->
      <path
          v-else
          d="M16.5 3C14.76 3 13.09 3.81 12 5.09 10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3z"
          fill="black"
      />

    </svg>
    Add to favorites
  </button>
</template>

<script setup>
import { ref } from 'vue'
import {addFavorite,delFavorite,getFavoriteList} from "@/api/details.ts";
import { message, Spin } from 'ant-design-vue'
import {useRouter} from "vue-router"
import {Local, Session} from "../../../utils/storage.ts";
import mitt from 'mitt';

// 创建事件发射器实例
const emitter = mitt();
const router = useRouter()
const token = localStorage.getItem('user_token');
const props = defineProps({
  modelValue: Boolean,
  id: Number
})
const emit = defineEmits(['update:modelValue'])

const toggleFavorite = async() => {
  if (!token) {
    message.warning("Please login first");
    const loading = Spin.setSpinning(true);
    setTimeout(() => {
      Spin.setSpinning(false);
      router.push('/login')
    }, 1000)
    return;
  }
  if (props.modelValue) {
    //取消收藏
    const res = await delFavorite({
      goods_id: props.id
    });
    emit('update:modelValue', !props.modelValue)
    const favoriteResDel = await getFavoriteList()
    if(favoriteResDel.code === 200){
      emitter.emit('getFavoriteApi');
      message.success('Delete favorite successfully')
      Session.set('collectList', favoriteResDel.result)
    }else{
      message.error('Delete favorite failed')
    }
    return;
  }else{
    //添加收藏
    const res = await addFavorite({
      goods_id: props.id
    })
    emit('update:modelValue', !props.modelValue)
    const favoriteRes = await getFavoriteList()
    if(favoriteRes.code === 200){
      emitter.emit('getFavoriteApi');
      message.success('Add to favorite successfully')
      Session.set('collectList', favoriteRes.result)

    }else{
      message.error('Add to favorite failed')
    }
    return;
  }

}
</script>

<style scoped>
.favorite-btn {
  margin-top: 10px;
  /* width: 65%; */
  height: 38px;
  border-radius: 0;
  border: none;
  background: white;
  cursor: pointer;
  /* 添加下划线 */
  text-decoration: underline;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  font-weight: 600;
  padding: 0;
}

.favorite-btn:hover {
  background: #f8f8f8;
}

.heart-icon {
  /* width: 60%; */
  height: 40%;
  margin-right: 5px;
}

.heart-icon path {
  stroke: #666;  /* 爱心线条颜色 */
  stroke-width: 1.5;
  fill: transparent;
  transition: all 0.2s ease;
}

.favorited .heart-icon path {
  stroke: black;  /* 选中状态线条颜色 */
  fill: black;    /* 选中状态填充颜色 */
}
:deep(.css-1p3hq3p).ant-input {
  border-radius: 0;
  padding: 8px 12px;
  border-radius: none;

}

</style>

